<template>
  <view @tap="itemHandleClick" class="clock-item">
    <!-- 用户信息 -->
    <view class="user-info flex between">
      <view class="flex user-info_student">
        <view class="user-info__avatar">
          <image :lazy-load="true" :src="studentInfo.avatar" />
        </view>
        <view>
          <view class="user-info__name">{{ studentInfo.nick_name }}</view>
          <view class="user-info__time">{{ clockInfo.created_at }}</view>
        </view>
      </view>
      <view class="flex" style="align-items: center;">
        <view class="user-info__petal">
          <image :lazy-load="true" :src="imgGather.PETAL_IMG" />
          <text>{{ studentInfo.total_petal_num | formatNumber }}</text>
        </view>
        <view class="user-info__medal">
          <image :lazy-load="true" class="user-info__medal--item" v-for="(achievement, index) in studentInfo.achievement" :key="index" :src="achievement" />
        </view>
      </view>
    </view>
    
    <!-- 打卡内容 -->
    <view class="clock-item__content" :class="{ 'clock-item__content-default' : clockInfo.is_answer }">{{ clockInfo.is_answer ? clockInfo.answer_show_title : clockInfo.commit_text }}</view>

    <!-- 音频 -->
    <view v-if="clockInfo.commit_audio.length" class="clock-item__audio">
      <view class="clock-item__audio--item" v-for="(item, index) in clockInfo.commit_audio" :key="index" :class="{ 'only-one': clockInfo.commit_audio.length === 1 }">
        <Audio @handleAudio="handleAudio" :index="audioIndex + '' + index" :src="item" />
      </view>
    </view>

    <!-- 图片 -->
    <view @tap.stop="preImg" class="clock-item__image">
      <image mode="aspectFill" :data-index="index" v-for="(item, index) in clockInfo.commit_img" :key="index" :src="item" />
      <view />
      <view />
    </view>

    <!-- 底部操作 -->
    <view class="clock-item__info flex between" :style="infoStyle">
      <view v-if="showClockDays" class="flex">
        <view class="clock-item__info--days">连续{{ clockInfo.continuous_clock_num }}天，累计{{ clockInfo.total_clock_num }}天</view>
        <view class="clock-item__info--interval">|</view>
        <view @tap.stop="createPoster" class="clock-item__info--poster">打卡海报</view>
      </view>
      <view v-else></view>

      <view class="clock-item__info--give-like">
        <view @tap.stop="giveLike" class="clock-item__info--give-like__handle">
          <image class="give-like-icon" :src="clockInfo.is_praise ? imgGather.BEEN_LIKE : imgGather.GIVE_LIKE" />
          <text v-show="!clockInfo.praise_num">点赞</text>
          <text v-show="clockInfo.praise_num">{{ clockInfo.praise_num | formatNumber }}</text>
        </view>

        <view class="more-handle" @tap.stop="openActionSheet" v-show="showMoreHandleBtn">
          <image :lazy-load="true" class="more-handle-image" :src="imgGather.MORE_HANDLES" />
        </view>
      </view>
    </view>

    <!-- 老师点评 -->
    <view v-if="showTeacherComment && clockInfo.comment_content" class="clock-item__teacher-comment">
      <view class="clock-item__teacher-comment--title">老师点评</view>
      <view class="clock-item__teacher-comment--content text-row-2">{{ clockInfo.comment_content }}</view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

import { GIVE_LIKE, PETAL_IMG, BEEN_LIKE } from "@/config/clock-calendar";
import { MORE_HANDLES } from "@/config/component-config/clock-header";
import Audio from "@/components/record/audio";
import { giveLike } from "_api/clock-calendar";
import Taro from "@tarojs/taro";
const MAX_NUMBER = 990000;
const NEED_SHIFT = 10000;
/* 点击不跳转 的路由配置 */
const NOT_JUMP_ROUTE = ["pages/clock-detail/index"];
@Component({
  components: {
    Audio,
  },
  filters: {
    /* 格式化点赞数和花瓣数 */
    formatNumber(value) {
      value = Math.abs(value);
      if (value < NEED_SHIFT) return value;
      let formatValue = value;
      formatValue = Math.min(
        Math.ceil(Math.abs(value) / NEED_SHIFT),
        MAX_NUMBER
      );
      if (formatValue >= MAX_NUMBER) {
        formatValue = MAX_NUMBER / NEED_SHIFT + "w+";
      } else {
        formatValue = formatValue + "w";
      }
      return formatValue;
    },
  },
})
export default class ClockItem extends Vue {
  /* 图片 */
  imgGather = {
    /* 点赞图片 */
    GIVE_LIKE,
    /* 已点赞图片 */
    BEEN_LIKE,
    /* 花瓣图片 */
    PETAL_IMG,
    /* 更多操作 */
    MORE_HANDLES,
  };
  /* 更多操作 动作面板 */
  showMoreHandles: boolean = false;
  /* 单点播放标识 */
  playFlag = -1;
  /* 事件loading */
  handleLoading: boolean = false;
  /* 是否已点赞 */
  hasLike: number = 0;

  @Watch("pageOnHide")
  changePageOnHide() {
    this.playFlag = -1;
  }
  /* 学生打卡信息 */
  @Prop(Object) item;
  /* 音频单点播放标识 */
  @Prop() audioIndex;
  @Prop() pageOnHide;
  /* 是否展示打卡天数 */
  @Prop({ default: true }) showClockDays;
  /* 展示更多操作按钮 */
  @Prop({ default: false }) showMoreHandleBtn;
  /* 展示老师评论 */
  @Prop({ default: false }) showTeacherComment;

  /* 当期页面栈信息 */
  get currentRoutePath(): string {
    return Taro.getCurrentPages()[Taro.getCurrentPages().length - 1].__route__;
  }
  /* 学生信息 */
  get studentInfo() {
    return this.item.student_base_info;
  }
  /* 打卡信息 */
  get clockInfo() {
    return this.item.student_clock_info;
  }

  get infoStyle() {
    return {
      "margin-top": this.clockInfo?.commit_img?.length ? "16rpx" : "32rpx",
    };
  }
  get mediaPlayFlag(){
    return this.$store.getters.mediaVideoFlag
  }

  /* 生成海报 */
  createPoster() {
    this.$emit("generateClockPoster", this.item);
  }

  /* 点击item事件 */
  itemHandleClick() {
    console.log("itemHandleClick");
    this.$emit("itemHandleClick", this.item);
    !NOT_JUMP_ROUTE.includes(this.currentRoutePath) &&
      Taro.navigateTo({
        url: `/pages/clock-detail/index?clock_id=${
          this.clockInfo.uuid || this.clockInfo.id
        }&student_id=${this.studentInfo.id}&theme_id=${
          this.clockInfo.theme_id
        }`,
      });
  }

  /* 预览图片 */
  preImg(e) {
    const index = e.target.dataset.index;
    console.log(index);

    if (index >= 0) {
      Taro.previewImage({
        urls: this.clockInfo.commit_img,
        current: this.clockInfo.commit_img[index],
      });
    }
  }

  handleAudio(index) {
    this.$store.commit('setMediaVideoFlag',index)
  }
  openActionSheet() {
    this.$emit("openActionSheet");
  }

  /* 点赞 */
  async giveLike() {
    if (this.handleLoading) return;
    this.handleLoading = true;
    console.log(this.clockInfo, "this.clockInfo");
    const props = {
      id: this.clockInfo.uuid || this.clockInfo.id,
      student_id: this.studentInfo.id,
    };
    const { data, message, status_code } = await giveLike(props).catch(
      (err) => {
        return err;
      }
    );
    this.handleLoading = false;
    if (data) {
      const item = this.item;
      const title = data
        ? item.student_clock_info.is_praise
          ? "取消点赞成功"
          : "点赞成功"
        : "点赞失败";
      item.student_clock_info.praise_num = data.praise_num;
      item.student_clock_info.is_praise = ~~!item.student_clock_info.is_praise;
      this.$emit("update:item", item);
      console.log(item);
      Taro.showToast({
        title,
        icon: "none",
      });
    }
    this.$emit("giveLikeHandle", data, message, status_code);
  }
}
</script>


<style lang="scss">
@import "../../assets/scss/tools.scss";
@import "../../assets/scss/theme.scss";

.clock-item {
  .flex {
    display: flex;
  }
  .between {
    justify-content: space-between;
  }
  .user-info {
    font-size: 28px;
    margin-bottom: 32px;
    &_student {
      flex: 0;
      width: 282px;
    }
    &__avatar {
      width: 80px;
      height: 80px;
      margin-right: 24px;
      > image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    &__name {
      color: #303133;
      font-weight: bold;
      margin-bottom: 6px;
      width: 220px;
      @include textEllipsis;
    }
    &__time {
      color: #606266;
      font-size: 24px;
      width: 220px;
      @include textEllipsis;
    }
    &__petal {
      margin-right: 24px;
      > image {
        vertical-align: middle;
      }
    }
    &__petal,
    &__medal {
      color: #606266;
      :nth-last-child(1),
      :nth-child(3) {
        margin-right: 0px;
      }
      > image {
        width: 52px;
        height: 52px;
        /* margin-right: 8px; */
      }
    }
  }
  &__content {
    color: #303133;
    font-size: 28px;
    line-height: 48px;
    margin: 32px 0;
    word-break: break-all;
  }
  &__content-default {
    margin-top: 40px;
    color: #a13d0f;
  }
  &__audio {
    @include normal-flex(space-between);
    flex-wrap: wrap;
    &--item {
      margin-top: 32px;
      width: 296px;
      &:nth-child(1),
      &:nth-child(2) {
        margin-top: 0px;
      }
    }
    .only-one {
      width: 100%;
    }
  }
  &__image {
    margin-top: 40px;
    :nth-child(3n) {
      margin-right: 0;
    }
    > image {
      width: 192px;
      height: 192px;
      margin: 0 16px 16px 0;
      vertical-align: middle;
      border-radius: 16px;
    }
  }
  &__info {
    font-size: 24px;
    align-items: center;
    &--days {
      color: #606266;
    }
    &--interval {
      color: #909399;
      margin: 0 16px;
    }
    &--poster {
      color: #ff8000;
    }
    &--give-like {
      color: #303133;
      display: flex;
      align-items: center;
      &__handle {
        @include normal-flex;
      }
      image.give-like-icon {
        width: 28px;
        height: 28px;
        margin-right: 8px;
      }
      .more-handle {
        width: 34px;
        height: 34px;
        margin-left: 48px;
        @include normal-flex;
        &-image {
          width: 34px;
          height: 6px;
        }
      }
    }
  }
  &__teacher-comment {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px dashed rgba(96, 98, 102, 0.2);
    word-break: break-all;
    color: $text-color-primary;
    font-size: 28px;
    line-height: 48px;
    &--title {
      width: 136px;
      height: 48px;
      background: rgba(255, 128, 0, 0.1);
      border-radius: 100px 100px 100px 0px;
      color: #ff8000;
      padding: 4px 12px;
      margin-bottom: 24px;
      @include normal-flex;
    }
  }
}
</style>